<script setup>
import { computed, onBeforeMount, reactive, ref } from 'vue'
// 监听视窗大小变化hooks
import { resizeHandler } from '@/hooks/ResizeHandler'
import router from '@/router'
// import menu from "@/views/blog/components/menu.vue";
import useAppStore from '@/store/modules/app'

const appStore = useAppStore()
const machineType = computed(() => appStore.machineType)
const searchData = ref(null)
const menuData = reactive([
  { label: '首页', url: '/blog/home' },
  { label: '分享', url: '/blog/share' },
  { label: '杂谈', url: '/blog/funs' },
  { label: '待定', url: '/blog/waitforit' },
  { label: '留言板', url: '/blog/messageBoard' },
])
resizeHandler()
onBeforeMount(() => {
  console.warn('main onBeforeMount')
})
function searchDataFun() {
  console.warn('key enter')
}
</script>

<template>
  <!-- <star></star> -->
  <div class="main-contanier">
    <div class="bg-img" />
    <div class="blog-header">
      <div v-if="machineType === 'desktop'" class="left-item">
        <span style="font-size: 24px">Logo</span>
      </div>
      <div class="my-menu">
        <div v-for="(item, index) in menuData" :key="index" class="my-menu-item text-shadow" @click="router.push(item.url)">
          {{ item.label }}
        </div>
      </div>
      <div v-if="machineType === 'desktop'" class="right-item">
        <el-input
          id="header-search" v-model="searchData" placeholder="搜索" name="header-search" autocapitalize="on"
          size="mini" @key.enter="searchDataFun"
        />
      </div>
    </div>
    <div class="blog-main">
      <router-view />
    </div>
  </div>
</template>

<style lang="scss" scoped>
// $red: red;
$white: #fff;

.main-contanier {
  background: transparent;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
  // overflow: scroll;
  position: relative;

  .bg-img {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(4, 216, 254, 0.381);
    z-index: -1;
  }

  .blog-header {
    width: 100%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 80px;

    .left-item {
      position: absolute;
      height: 100%;
      left: 5%;
      top: 0;
      display: flex;
      align-items: center;
    }

    .right-item {
      height: 100%;
      position: absolute;
      right: 5%;
      top: 0;
      display: flex;
      align-items: center;
    }
  }

  .blog-main {
    width: 100%;
    height: 2000px;
  }
}

@media (height > 992px) {
  .my-menu {
    width: 992px;
  }
}

@media (height <=992px) {
  .my-menu {
    width: 100%;
  }
}

.my-menu {
  display: flex;
  background-color: rgba(7, 36, 39, 0.371);
  width: auto;
  opacity: 0.3;
  font-size: 20px;
  max-width: 992px;
  width: 100%;

  .my-menu-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
    padding: 0 50px;
    width: 20%;
    background-color: rgba(127, 255, 212, 0.184);
    color: $white;
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  }

  .my-menu-item:hover {
    font-size: large;
    cursor: pointer;
    background-color: rgba(127, 246, 255, 0.405);
  }
}

.text-shadow {
  text-shadow: 5px 2px 2px rebeccapurple;
}
</style>
